<template>
  <div v-if="visible" class="xcgl-properties" style="boder-radius:10px">
    <i class="tab-pane-header-btn el-icon-close" @click="closePop"/>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="属性信息" name="first">
        <ul class="ul-list">
          <li v-for="(item,index) in fields" :key="index">
            <el-row>
              <el-col :span="4">
                <span class="fieldTitle">{{ item.k }}</span>
              </el-col>
              <el-col :span="20" style="padding-left:5px">
                <el-input v-model="item.v" type="text" clearable/>
              </el-col>
            </el-row>
          </li>
        </ul>
        <el-button
          type="button"
          class="el-button--primary"
          size="mini"
          style="width: 100%"
          @click="saveProperties"
        >保存</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { add, remove, update } from '@/api/xcgl/ysbj'
import axios from 'axios'

export default {
  name: 'Index',
  data: function() {
    return {
      visible: undefined,
      activeName: 'first',
      images: [],
      videos: [],
      fields: [],
      remote: [],
      image_url: 'http://218.10.70.76:3002/images/',
      video_url: 'http://218.10.70.76:3002/video/',
      feature: undefined,
      xmName: []
    }
  },
  methods: {
    /**
     * 关闭Pop
     */
    closePop() {
      this.visible = undefined
    },

    handleClick(tab, event) {},
    /**
     * 设置数据
     */
    setData(feature) {
      let dictionary
      try {
        dictionary = JSON.parse(this.attributes)
      } catch (e) {
        dictionary = {}
      }

      const vi = document.getElementsByTagName('video')
      for (let i = 0; i < vi.length; i++) {
        vi[i].load()
      }
      this.feature = feature
      const properties = feature.properties
      this.fields = []
      this.videos = [] // 'DJI_0489.mp4','DJI_0490.mp4','DJI_0491.mp4','DJI_0492.mp4','DJI_0608.mp4','DJI_0609.mp4'
      this.images = []
      for (const key in properties) {
        if (key === 'images' || key === 'fileName') {
          const images = properties[key]
          const files = images.split(',')
          for (let i = 0; i < files.length; i++) {
            if (files[i] === '') {
              continue
            }
            if (files[i].substring(files[i].indexOf('.')) === '.mp4') {
              this.videos.push(files[i])
            } else {
              this.images.push(files[i])
            }
          }
          continue
        }
      }
      for (const key in dictionary) {
        const value = properties[key]
        this.fields.push({ k: key, v: value, mode: 0 })
      }
    },
    /**
     * 保存数据
     */
    saveProperties() {
      for (let i = 0; i < this.fields.length; i++) {
        this.feature.properties[this.fields[i].k] = this.fields[i].v
      }
      update({ id: this.feature.id, properties: this.feature.properties }).then(
        res => {
          const index = this.featureCollection.findIndex(feature => {
            return feature.id === this.feature.id
          })
          this.featureCollection[index].properties = this.feature.properties
          this.$store.commit(
            'xcgl/setFeatureCollection',
            this.featureCollection
          )
          this.mapService.setDrawControlFC({
            type: 'FeatureCollection',
            features: this.featureCollection
          })
        }
      )
    },

    querySearch(queryString, cb) {
      var restaurants = this.xmName
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1
        )
      }
    }
  },
  computed: {
    ...mapState({
      attributes(state) {
        return state.xcgl.selectTask ? state.xcgl.selectTask.attribute : {}
      },
      /**
       * 要素
       * @param state
       * @returns {featureCollection|(function(*))|Array|*}
       */
      featureCollection(state) {
        return state.xcgl.featureCollection
      },
      /**
       * 服务类
       * @param state
       * @returns {mapService|(function(*))|*}
       */
      mapService(state) {
        return state.xcgl.mapServiceRight
      },

      propertiesShow(state) {
        return state.xcgl.propertiesShow
      }
    })
  },
  mounted() {
    // this.fetBdxmData();
  }
}
</script>

<style scoped>
.xcgl-properties {
  position: absolute;
  right: 10px;
  top: 190px;
  width: 310px;
  background-color: white;
  height: 280px;
  border-radius: 0px;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.xcgl-properties .ul-list {
  padding: 5px;
  width: 100%;
  font-size: 12px;
  height: 180px;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: "Helvetica Neue";
  margin: 0px;
}

.xcgl-properties .ul-list li {
  list-style: none;
  height: auto;
  margin-bottom: 2px;
}

.xcgl-properties .ul-list li .fieldTitle {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #000;
  display: flex;
  flex-direction: column; /*元素的排列方向为垂直*/
  justify-content: center; /*水平居中对齐*/
  align-items: center; /*垂直居中对齐*/
}

.lb {
  width: 350px !important ;
}
.xcgl-properties .el-button--primary {
  position: relative;
  margin-top: 5px;
}
</style>
